<template>
  <div>
    <el-button @click="addOne" type="primary" size="mini" style="margin-bottom:10px">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="__id"
      border
      default-expand-all v-bind="$attrs" v-on="$listeners"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="层级" prop="__id" :width="mcTreeNodeWidth"></el-table-column>
      <slot></slot>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="addChildren(scope)" type="primary">+</el-button>
          <el-button size="mini" @click="deleteNode(scope)" type="danger">-</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: 'mc-table-tree',
  data () {
    return {
      tableData:this.getData()
    }
  },
  props:['data','childrenKey','buildItem','mcTreeNodeWidth'],
  watch:{

  },
  mounted () {

  },
  methods:{
    getData(){
      var newData = this.parseData(this.data);
      this.iteratorTree(newData,null,0);
      return newData.children;
    },
    parseData(originData){
      var data = originData||[];
      if(!Array.isArray(data)){
        data = [data]
      }
      return  {children: data}
    },
    addOne(){
      this.addChildren({row:{children: this.tableData,__id:"1"}})
    },
    findNotUseId(children){
      if(children && children.length>0){
        var last = children[children.length-1];
        var __id =last.__id;
        var arr = __id.split("-");
        return parseInt(arr[arr.length-1])
      }
      return 1;
    }
    ,
    addChildren(scope){
      var row = scope.row;
      var node = this.buildItem(row);
      if(!node['__id']){

        node.__id = (row.__id)+"-"+(this.findNotUseId(row.children)+1);
        node.__pid = row.__id;
      }
      if(!node['children']){
        this.$set(node,"children",[]);
      }
      this.$nextTick(function() {
        row.children.push(node)
      })
    },
    deleteNode(scope){
      var map = this.nodeToMap({__id:"_",children:this.tableData})
      var pid = scope.row.__pid;
      var pnode = map[pid];
      if(!pnode){
        for(var i=0;i<this.tableData.length;i++){
          if(scope.row.__id==this.tableData[i].__id){
            this.tableData.splice(i,1);
          }
        }
      }else {
        for(var i=0;i<pnode.children.length;i++){
          if(scope.row.__id==pnode.children[i].__id){
            pnode.children.splice(i,1);
          }
        }
      }
    },
    iteratorTrees:function (nodeArr,parent){
      for(var i=0;i<nodeArr.length;i++){
        this.iteratorTree(nodeArr[i],parent);
      }
    },
    iteratorTree:function(node,parent,i){
      if(!node.children){
        this.$set(node,"children",[]);
      }
      node.__pid = parent?parent.__id:"";
      //node.__parent = parent;
      node.__id = node.__pid?node.__pid+"-"+(i+1):''+(i+1);
      var children = node.children;
      for(var i=0;i<children.length;i++){
        this.iteratorTree(children[i],node,i)
      }
    },
    nodeToMap:function(node){
      var map = {}
      var nodeList = []
      this.nodeToList(node,nodeList);
      for(var i=0;i<nodeList.length;i++){
        map[nodeList[i].__id] = nodeList[i];
      }
      return map;
    },
    nodeToList:function (node,nodeList) {
      nodeList.push(node);
      var children = node.children;
      for(var i=0;i<children.length;i++){
        this.nodeToList(children[i],nodeList);
      }
    },
    //简化树数据
    simpleData:function (){
      var data = JSON.parse(JSON.stringify(this.data));
      var iteratorTree = function(node){
       // delete node['__parent'];
        delete node['__pid'];
        delete node['__id'];
        var children = node.children;
        for(var i=0;i<children.length;i++){
          iteratorTree(children[i])
        }
      }
      iteratorTree(this.parseData(data));
      return data;
    }
  }
}
</script>

<style lang="scss">


</style>
